import { Button } from 'antd';
import React, { useState } from 'react';

import AddUserModal from '@/components/AddUserModal';
import LogoutModal from '@/components/LogoutModal';
import LocalInfo from '@/utils/localInfo';

import bg from '../../img/sys.png';
const System: React.FC = () => {
  // 退出登录弹窗
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };

  const [isaddModalOpen, setIsaddModalOpen] = useState(false);
  const showaddModal = () => {
    setIsaddModalOpen(true);
  };

  return (
    // <div style={{ backgroundImage: `url(${bg})`, backgroundSize: 'cover'}}>
    <div>
      {/* 添加用户 */}
      <div
        style={{
          background: '#fff',
          padding: '25px',
          marginBottom: '25px',
          marginTop: '-24px',
        }}
      >
        <img
          src={bg}
          alt="Logo"
          style={{ width: '70%', height: '75%', marginTop: '-20px' }}
        ></img>
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: '20px' }}>
          <div>
            <Button
              type="primary"
              onClick={showaddModal}
              style={{ marginRight: '20px' }}
              disabled={LocalInfo.getRoleId() === 2}
            >
              添加用户
            </Button>
          </div>
          <div>
            <Button type="primary" onClick={showModal} style={{ marginLeft: '20px' }}>
              退出登录
            </Button>
          </div>
        </div>
      </div>

      <AddUserModal visible={isaddModalOpen} setVisible={setIsaddModalOpen} />

      <LogoutModal visible={isModalOpen} setVisible={setIsModalOpen} />
    </div>
  );
};

export default System;
